<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>版本更新</title>

		<style>
			html,
			body {
				height: 100VH;
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.3);
				color: white;
				font-size: 0.625rem;
			}

			a {
				text-decoration: none;
			}

			.root {
				height: 100VH;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.box {
				display: flex;
				width: 80%;
				box-sizing: border-box;
				flex-direction: column;
				padding: 0rem;
				background-color: white;
				border: 5%;
				border-radius: 4%;
				margin: 1rem;
			}

			.box .top {
				text-align: center;
				font-weight: bold;
				font-size: 1.625rem;
				padding: 3rem 1rem;
				color: black;
			}

			.box .center {
				flex: 1;
				box-sizing: border-box;
			}

			.box .list-box #list-view {
				padding: 0;
				list-style: none;
			}

			.box .description {
				font-size: 1.5rem;
				padding: .25rem 2rem;
				font-family: cursive;
				color: black;
				height: 10%;
			}

			.box .bottom {
				padding: 2rem 1rem;
				width: 100%;
				box-sizing: border-box;
			}

			.box .bottom .button {
				display: block;
				padding: 1.3rem 2.75rem;
				border-radius: 1.25rem;
				color: white;
				margin: 0rem 2rem;
				font-weight: bold;
				text-align: center;
				font-family: Helvetica;
				font-size: 1.25rem;
				cursor: pointer;
				letter-spacing: 0.375rem;
				animation: pulse 1.5s infinite;
				transition: transform 0.3s;
				box-sizing: border-box;
				background: linear-gradient(-75deg, #616BFA, #0094ff, #616BFA, #0094ff, #616BFA);
				background-size: 400%;
				animation: gradient 20s linear infinite;
			}


			.box .button:hover {
				transform: scale(1.1);
			}

			.box .button::before {
				opacity: 1;
			}


			@keyframes pulse {
				0% {
					transform: scale(1);
				}

				50% {
					transform: scale(1.2);
				}

				100% {
					transform: scale(1);
				}
			}

			@keyframes gradient {
				0% {
					background-position: 600%;
				}

				100% {
					background-position: 0%;
				}
			}
		</style>

	</head>
	<body>

		<div class="root">

			<div class="box">
				<div class="top">新版本提醒</div>
				<div class="center">
					<div id="lottie"></div>
				</div>
				<div class="list-box">
					<ul id="list-view">
					</ul>
				</div>
				<div class="bottom">
					<a class="button" href="http://49.234.150.152/file-service/android/host/web/host.apk">下载新版本</a>
				</div>
			</div>

		</div>

	</body>
	<script type="text/javascript">
		// 创建一个数组来存储要生成的列表项内容
		var items = ['提升启动速度', '优化加载提示框'];

		// 获取要插入的列表元素
		var list = document.getElementById('list-view');

		// 遍历数组并生成 <li> 元素
		for (var i = 0; i < items.length; i++) {
			// 创建一个新的 <li> 元素
			var li = document.createElement('li');

			// 设置 <li> 元素的文本内容为数组中对应索引的值
			li.textContent = items[i];

			// 添加 class="description" 属性
			li.setAttribute("class", "description");

			// 将 <li> 元素添加到列表中
			list.appendChild(li);
		}

		let netVersion = "1.0";
		var localVersion = "1.0";

		try {
			// AndroidInterface.disableCancel(false);
		} catch (e) {
			//TODO handle the exception
		}

		try {
			localVersion = AndroidInterface.getAppVersionName();
		} catch (e) {
			//TODO handle the exception
		}

		var net = Number(netVersion);
		var local = Number(localVersion);

		if (net > local) {

			try {
				AndroidInterface.toast("请更新版本!");
			} catch (e) {
				//TODO handle the exception
			}

		} else {

			try {
				AndroidInterface.dissmiss("123");
			} catch (e) {
				//TODO handle the exception
			}
		}
	</script>
</html>